<!--管理网站统一的头部和尾部-->
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<link rel="stylesheet" href="css/common.css">
	<link rel="stylesheet" href="css/temple.css">
	<link rel="stylesheet" href="css/index.css">
</head>
<body>
	<!--顶部 B-->
	<div class="top">
		<div class="center top_c">你好，欢迎来到美食美刻网！</div>
	</div>
	<!--顶部 E-->
	<!--logo B-->
	<div class="logo">
		<div class="center l_c">
			<div class="l_left fl">
				<h1>
					<a href="#">美食美刻</a>
				</h1>
			</div>
			<div class="l_center fl">
				<input class="txt fl" type="text" placeholder="请输入菜谱/食材/菜单">
				<input class="btn fl" type="button" value="搜索">
			</div>
			<div class="l_right fr">
				<ul>
					<li><b></b><a href="#">QQ注册</a></li>
					<li><b class="sina"></b><a href="#">微博登录</a></li>
					<li><a href="#">注册</a></li>
					<li><input type="button" value="登录"></li>
				</ul>
			</div>
		</div>				
	</div>
	<!--logo E-->
	<!--内容  B-->
	<!--首页导航 B-->
	<div class="nav">
		<div class="center nav_c">
			<ul>
				<li><a href="#" class=cRed>首页</a></li>
				<li><a href="#">菜谱大全</a></li>
				<li><a href="#">饮食健康</a></li>
				<li><a href="#">家居馆</a></li>
				<li><a href="#">美食达人</a></li>
				<li><a href="#">讨论组</a></li>
				<li><a href="#">手机版下载</a></li>
			</ul>
		</div>
	</div>
	<!--首页导航 E-->
	<!--首页banner B-->
	<div class="banner">
		<h2 class="h2Title">今日早餐推荐：给心爱的TA做顿元气满满的早餐吧</h2>
		<ul class="clearfix">
			<li>
				<div>
					<a href="#">
						<img src="images/bread.png" alt="">
					</a>
				</div>
				<div class="des">
					<p class="p1">美味面包片</p>
					<p class="p2">草莓面包片，营养双管齐下</p>
				</div>
			</li>
			<li>
				<div>
					<a href="#">
						<img src="images/wonton.png" alt="">
					</a>
				</div>
				<div class="des">
					<p class="p1">香煎大馄饨</p>
					<p class="p2">咸香的味道在味蕾中绽放</p>
				</div>
			</li>
			<li>
				<div>
					<a href="#">
						<img src="images/zongzi.png" alt="">
					</a>
				</div>
				<div class="des">
					<p class="p1">粽子</p>
					<p class="p2">美味的粽子，好吃的同时还能吃出情怀</p>
				</div>
			</li>
			<li class="mix">
				<div>
					<a href="#">
						<img src="images/mix.png" alt="">
					</a>
				</div>
				<div class="des des_mix">
					<p class="p1">冰沙杯橙汁混合...</p>
					<p class="p2">冷冻芒果，菠萝，很多草莓，配上麦片，生......        </p>
				</div>
			</li>
		</ul>
		<div class="arrow">
			<a href="#" class="a_left">
				<span class="word"><span class="fz14">夜宵</span><br/>22:00-01:00</span>
				<span class="img"></span>
			</a>
			<a href="#" class="a_right">
				<span class="img"></span>
				<span class="word"><span class="fz14">午餐</span><br/>11:30-14:30</span>
			</a>
		</div>
	</div>
	<!--首页banner E-->
	<!--首页搜索 B-->
	<div class="search">
		<div class="s_center">
			<input class="txt fl" type="text" value="请输入菜谱、食材">
			<input class="btn fl" type="button" value="搜索">
		</div>
	</div>
	<!--首页搜索 E-->
	<!--首页菜单 B-->
	<div class="arrow_pos">
		<div class="menu center">
			<h2 class="h2Title">5月，立夏需养心<a href="#" class="more">更多菜单&nbsp;&nbsp;&nbsp;></a></h2>
			<ul class="img clearfix">
				<li>
					<div>
						<a href="#">
							<img src="images/menu_1.png">
						</a>
					</div>
					<div class="word">
						<p class="p1">四月水果当季尝</p>
						<p class="p2">你舍得错过当季这些甜美z的果实吗？</p>
					</div>
				</li>
				<li>
					<div>
						<a href="#">
							<img src="images/menu_2.png">
						</a>
					</div>
					<div class="word">
						<p class="p1">鲜花菜肴</p>
						<p class="p2">来，让人间芬芳一一开遍你的餐桌</p>
					</div>
				</li>
				<li>
					<div>
						<a href="#">
							<img src="images/menu_3.png">
						</a>
					</div>
					<div class="word w_1">
						<p class="p1">中式下午茶</p>
						<p class="p2">理想的下午，在家喝出女王范儿</p>
					</div>
				</li>
			</ul>
		</div>
		<div class="arrow">
			<a href="#" class="a1"></a>
			<a href="#" class="a2"></a>
		</div>
	</div>
	<!--首页菜单 E-->
	<!--首页食材 B-->
	<div class="food center">
		<h2 class="h2Title">5月，健脾祛湿热<a href="#" class="more">更多菜单&nbsp;&nbsp;&nbsp;></a></h2>
		<ul class="f_nav clearfix">
			<li class="bgRed"><a class="white" href="#">水果</a></li>
			<li><a href="#">蔬菜</a></li>
			<li><a href="#">五谷</a></li>
			<li><a href="#">三鲜</a></li>
		</ul>
		<ul class="f_img clearfix">
			<li>
				<a href="#">
					<img src="images/food_1.png" alt="">
					<span>西瓜</span>
				</a>
			</li>
			<li>
				<a href="#">
					<img src="images/food_2.png" alt="">
					<span>蓝莓</span>
				</a>
			</li>
			<li>
				<a href="#">
					<img src="images/food_3.png" alt="">
					<span>猕猴桃</span>
				</a>
			</li>
			<li>
				<a href="#">
					<img src="images/food_4.png" alt="">
					<span>青苹果</span>
				</a>
			</li>
			<li>
				<a href="#">
					<img src="images/food_5.png" alt="">
					<span>草莓</span>
				</a>
			</li>
			<li>
				<a href="#">
					<img src="images/food_6.png" alt="">
					<span>樱桃</span>
				</a>
			</li>
		</ul>
	</div>
	<!--首页食材 E-->
	<!--首页菜谱 B-->
	<div class="menu center">
		<h2 class="h2Title">最新菜谱<a href="#" class="more">更多菜谱&nbsp;&nbsp;&nbsp;></a></h2>
		<ul class="img clearfix">
			<li>
				<div>
					<a href="#">
						<img src="images/cook1_1.png">
					</a>
				</div>
				<div class="word">
					<p class="p1">菲力牛排套餐</p>
					<p class="p3">6人评&nbsp;&nbsp;&nbsp;1262人气</p>
				</div>
			</li>
			<li>
				<div>
					<a href="#">
						<img src="images/cook1_2.png">
					</a>
				</div>
				<div class="word">
					<p class="p1">蒸排骨</p>
					<p class="p3">6人评&nbsp;&nbsp;&nbsp;1262人气</p>
				</div>
			</li>
			<li>
				<div>
					<a href="#">
						<img src="images/cook1_3.png">
					</a>
				</div>
				<div class="word">
					<p class="p1">烤翅</p>
					<p class="p3">6人评&nbsp;&nbsp;&nbsp;1262人气</p>
				</div>
			</li>
		</ul>
	</div>
	<div class="none"></div>
	<div class="arrow_pos">
		<div class="menu center">
			<ul class="img clearfix">
				<li>
					<div>
						<a href="#">
							<img src="images/cook2_1.png">
						</a>
					</div>
					<div class="word">
						<p class="p1">绿茶烤肉</p>
						<p class="p3">6人评&nbsp;&nbsp;&nbsp;1262人气</p>
					</div>
				</li>
				<li>
					<div>
						<a href="#">
							<img src="images/cook2_2.png">
						</a>
					</div>
					<div class="word">
						<p class="p1">糖醋排骨</p>
						<p class="p3">6人评&nbsp;&nbsp;&nbsp;1262人气</p>
					</div>
				</li>
				<li>
					<div>
						<a href="#">
							<img src="images/cook2_3.png">
						</a>
					</div>
					<div class="word">
						<p class="p1">鱼肉</p>
						<p class="p3">6人评&nbsp;&nbsp;&nbsp;1262人气</p>
					</div>
				</li>
			</ul>
		</div>
		<div class="arrow">
			<a href="#" class="a3"></a>
			<a href="#" class="a4"></a>
		</div>
	</div>
	<div class="none"></div>
	<div class="cook3 center">
		<ul class="img clearfix">
			<li>
				<div>
					<a href="#">
						<img src="images/cook3_1.png">
					</a>
				</div>
				<div class="word">
					<p class="p1">椒盐虾</p>
					<p class="p3">6人评&nbsp;&nbsp;&nbsp;1262人气</p>
				</div>
			</li>
			<li>
				<div>
					<a href="#">
						<img src="images/cook3_2.png">
					</a>
				</div>
				<div class="word">
					<p class="p1">日式鸡肉丸</p>
					<p class="p3">6人评&nbsp;&nbsp;&nbsp;1262人气</p>
				</div>
			</li>
			<li class="hot">
				<div class="hot_top">
					<p class="p3 com">热门栏目推荐</p>
				</div>
				<div class="hot_center">
					<div class="hc1">
						<input class="bg font" type="button" value="最新菜谱">
						<input class="bg font" type="button" value="家常菜">
						<input class="bg font" type="button" value="热门菜">
					</div>
					<div class="hc2">
						<input class="bg font" type="button" value="凉菜">
						<input class="bg font" type="button" value="荤菜">
						<input class="bg font" type="button" value="素菜">
					</div>
					<div class="hc2">
						<input class="bg font" type="button" value="韩国料理">
						<input class="bg font" type="button" value="日本料理">
						<input class="bg font" type="button" value="饭后甜点">
					</div>
					<div class="hc3">
						<input class="bg font" type="button" value="粤菜">
						<input class="bg font" type="button" value="湘菜">
						<input class="bg font" type="button" value="川菜">
					</div>
						<input class="bgRed white all" type="button" value="进入菜谱大全>>">
				</div>
			</li>
		</ul>
	</div>

	<!--健康新闻 B-->
	<div class="arrow_pos">
		<div class="new center">
			<h2 class="h2Title">健康新闻<a href="#" class="more">更多新闻&nbsp;&nbsp;&nbsp;></a></h2>
			<ul class="img clearfix">
				<li>
					<a href="#">
						<img src="images/news_1.png">
					</a>
				</li>
				<li>
					<a href="#">
						<img src="images/news_2.png">
					</a>
				</li>
				<li>
					<a href="#">
						<img src="images/news_3.png">
					</a>
				</li>
				<li>
					<a href="#">
						<img src="images/news_4.png">
					</a>
				</li>
			</ul>
		</div>
	</div>
	<!--健康新闻 E-->



	<!--首页菜谱 E-->
	<!--内容 E-->
	<!--底部 B-->
	<div class="foot">
		<div class="f_border">
			<div>
				<b class="b1"></b>
				<b class="b2"></b>
				<b class="b3"></b>
				<b class="b4"></b>
			</div>
			<div class="center">
				<div class="f_left fl">
					<ul>
						<li>中国，最大的菜谱库 <span class="fz14"><span class="cRed">800,000</span> 篇</span></li>
						<li>每月，用户访问数量 <span class="fz14"><span class="cRed">20,000,000</span> 次</span></li>
						<li>每年，菜谱被浏览量 <span class="fz14"><span class="cRed">36,000,000,000</span> 次</span></li>
						<li>现在，这些数字还在不断的增长着，欢迎您来一起使用美食美刻</li>
					</ul>
				</div>
				<div class="f_right fr">
					<ul>
						<li>
							<a href="#">
								<s></s>
								<span>点击进入<br/>爱美食微博官网</span>
							</a>
						</li>
						<li>
							<a href="#">
								<s class="qq"></s>
								<span>点击进入<br/>爱美食QQ空间</span>
							</a>
						</li>
						<li>
							<a href="#">
								<s class="weChat "></s>
								<span>扫二维码添加<br/>爱美食为微信好友</span>
							</a>
						</li>
						<li>
							<a href="#">
								<s class="app"></s>
								<span>扫二维码添加<br/>下载吗爱美食手机客户端</span>
							</a>
						</li>
					</ul>
				</div>
			</div>
		</div>
	</div>
	<!--底部 E-->
</body>
</html>